<template>
  <div>
    <!-- S: 商品分类选择 -->
    <div class="classification">
      <div class="classificationLeft">
        <div class="classificationImg"><img src="../../assets/02_Healthpot.png"/></div>
      </div>
      <div class="classificationRight">
        <div class="classificationCloseBtn" @click="addCar"><img src="../../assets/detailCloseBtn.png"/></div>
        <div class="classificationInfo">
          <div class="classifcationInfoPrice">￥{{demo1Checkbox | selectPrice}}</div>
          <div class="classifcationInfoStore">库存:{{demo1Checkbox | selectStore}}</div>
          <div class="classifcationInfoSelect">已选：{{demo1Checkbox | selectColor}}</div>
        </div>
      </div>
      <div class="c"></div>
    </div>
    <div class="hr"></div>
    <div class="classifcationColor">
      <div>颜色分类</div>
      <checker v-model="demo1Checkbox"  default-item-class="classifcationColorSelect" selected-item-class="classifcationColorSelectActive">
        <checker-item value="1">20cm x 40cm</checker-item>
        <checker-item value="2">30cm x 80cm</checker-item>
        <checker-item value="3">80cm x 100cm</checker-item>
        <checker-item value="4">20cm x 40cm(加厚款)</checker-item>
        <checker-item value="5">80cm x 100cm(加厚款)</checker-item>
      </checker>
      <div class="hr mt10"></div>
      <div class="classifcationCalc">
        <label>购买数量</label>
        <label class="calcNumber">
          <inline-x-number :min="0" width="50px"></inline-x-number>
        </label>
        <div class="c"></div>
      </div>
      <div class="hr"></div>
    </div>
    <div class="closePopupBtn">
      <div class="addCar" @click="addCar">加入购物车</div>
      <div class="buyNow">立即购买</div>
    </div>
    <!-- E:商品分类选择 -->
  </div>
</template>
<script>
  import { Checker, CheckerItem, InlineXNumber } from 'vux'
  export default {
    props: ['filterPro'],
    components: {
      Checker,
      CheckerItem,
      InlineXNumber
    },
    data () {
      return {
        demo1Checkbox: 2
      }
    },
    methods: {
      addCar: function () {
        this.$emit('addCar')
        this.$emit('sendNotice', this.demo1Checkbox)
      }
    },
    filters: {
      selectColor (val) {
        if (val == null) {
          return '未选择'
        } else if (val === '1') {
          return '20cm x 40cm'
        } else if (val === '2') {
          return '30cm x 80cm'
        } else if (val === '3') {
          return '80cm x 100cm'
        } else if (val === '4') {
          return '20cm x 40cm(加厚款)'
        } else if (val === '5') {
          return '80cm x 100cm(加厚款)'
        } else {
          return '未选择'
        }
      },
      detailFilter (val) {
        if (val == null) {
          return '请选择 颜色分类'
        } else if (val === '1') {
          return '已选: 20cm x 40cm'
        } else if (val === '2') {
          return '已选: 30cm x 80cm'
        } else if (val === '3') {
          return '已选: 80cm x 100cm'
        } else if (val === '4') {
          return '已选: 20cm x 40cm(加厚款)'
        } else if (val === '5') {
          return '已选: 80cm x 100cm(加厚款)'
        } else {
          return '请选择 颜色分类'
        }
      },
      selectStore (val) {
        if (val == null) {
          return '120'
        } else if (val === '1') {
          return '34'
        } else if (val === '2') {
          return '25'
        } else if (val === '3') {
          return '1'
        } else if (val === '4') {
          return '1'
        } else if (val === '5') {
          return '55'
        } else {
          return '120'
        }
      },
      selectPrice (val) {
        if (val == null) {
          return '2363.20-12000.20'
        } else if (val === '1') {
          return '4200.00'
        } else if (val === '2') {
          return '6999.00'
        } else if (val === '3') {
          return '8363.41'
        } else if (val === '4') {
          return '10000.90'
        } else if (val === '5') {
          return '12000.20'
        } else {
          return '2363.20-12000.20'
        }
      }
    }
  }
</script>
<style lang='sass'>
</style>
